<!DOCTYPE html>
<html>
<head>
	<title>3-7 Vue中的条件渲染</title>
	<script type="text/javascript" src="../../vue.js"></script>
</head>
<body>
	<div id='root'>
		<!-- 
			相当于js代码里 if(show){}else{}
		 	v-if v-show 都能控制dom是否在页面上显示,不同的是v-show是隐藏dom,v-if是删除dom
		 	所以v-show性能要高于v-if
		 	<div v-if="show">{{message}}</div>
		 	它们之间不能被其它没有if或者else的标签,否则报错 
			<div v-else>bye bye!</div>
		 -->
		 <!-- <div v-show="show">{{message}}</div> -->

		
		<!-- <div v-if="show === 'a'">This is A</div>
		<div v-else-if="show === 'b'">This is B</div>
		<div v-else>hello</div> -->

		<!-- key值:为什么要这个key?是因为vue在加载页面时会优先去利用重复的dom,如果有相同
				   的dom,并且有值;复用后还会使用之前这个dom的值,这样是不好的.
				   加了key就代表当前标签是唯一的dom
		 -->

		 <div v-if="show">
		 	用户名:<input key="username">
		 </div>
		 <div v-else>
		 	邮箱:<input key="email">
		 </div>



		
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#root',
			data:{
				show:false,
				message:'hello world'
			}
		});
	</script>
</body>
</html>